<template>
	<view class="wrap" @click="goDetail">
		<view class="tag">{{activityTypeStr}}</view>
		<view class="tag2" v-if="isReferralBonuses == 0">推荐奖励</view>
		<image class="cover" :src="activityUrl" mode="aspectFill"></image>
		<view class="content">
			<view class="title">{{activityTitle}}</view>
			<view class="time" v-if="finishTime != 0">
				距离活动结束还剩
				<text>{{duration}}</text>
			</view>
			<view class="join">
				<view>
					已报名
					<text>{{applyCount}}人</text>
				</view>
				<view class="button">立即参加</view>
			</view>
		</view>

		<!-- <login-mask></login-mask> -->

	</view>
</template>

<script>
	import loginMask from '@/components/layout/login-mask.vue'
	export default {
		components: {
			loginMask
		},
		data() {
			return {
				activityTypeStr : '',
				duration : ''
			}
		},

		props:{
			activityId: {
				type:String,
				default: ''
			},
			// 活动图片
			activityUrl:{
				type:String,
				default:'/static/home/home_default_2.jpg'
			},
		    // 活动类型字符串
			activityType: {
			   type: Number,
			   default: 0,
			},
			//活动类型
			type: {
				type: Number,
				default: 0
			},
			//优惠类型
			couponType: {
				type:String,
				default:''
			},
			//活动标题
			activityTitle: {
				type:String,
				default:'一键加油 立减20元'
			},
			//活动结束的时间戳
			finishTime: {
				type: Number,
				default: 0
			},
			//报名人数
			applyCount: {
				type:String,
				default:'100'
			},
			isReferralBonuses: {
				type: Number,
				default: 1
			}
		},

		mounted() {
		 this.configData();
		 this.getDuritionTime();
		},
		computed: {
		},
		methods: {
			configData() {
			switch(this.activityType) {
				case 1:
				 this.activityTypeStr = '秒杀活动'
				 break
				case 2:
				this.activityTypeStr = '集客活动'
				break
				case 3:
				this.activityTypeStr = '同行活动'
				break
				case 4:
				this.activityTypeStr = '抽奖活动'
			}
     },
		 getDuritionTime() {
			 //获取当前时间的毫秒值
			 var date = new Date();
			 var timestap = date.getTime();
			 //时间差
			 var difftime = (this.finishTime*1000 - timestap)/1000;
			 var days = parseInt(difftime/86400); //天
			 var hours = parseInt(difftime/3600)-24*days; //时
			 this.duration = days + '天' + hours + '小时';
		 },
		 goDetail() {
		 	let urls = [
		 		'../../pages/activity/activityDetail-secondKill',
		 		'../../pages/activity/activityDetail-gather',
		 		'../../pages/activity/activityDetail-peer',
		 		'../../pages/activity/activityDetail-sweepstakes',
		 		];

			if(this.activityType == 3) {//同行活动

			  if(uni.$u.test.isEmpty(this.$store.state.user.userInfo)){
			  	this.$store.dispatch('user/MmvLogin');
			  	return
			  }
				uni.navigateTo({
					url: urls[this.activityType-1] + '?bizNo=' + this.activityId
				})
			}else {
				uni.navigateTo({
					url: urls[this.activityType-1] + '?bizNo=' + this.activityId
				})
			}

		 }
		},


	}
</script>

<style lang="scss" scoped>
.wrap {
	width: 338upx;
	height: 425upx;
	border-radius: 16upx;
	background-color: #fff;
	position: relative;
	text-spacing: 25upx;
	display: inline-block;
	margin-top: 30upx;
}

.tag {
	position: absolute;
	top: 10upx;
	left: 10upx;
	background-color: #000;
	color: #ffd394;
	font-size: 20upx;
	line-height: 44upx;
	padding: 0 15upx;
	border-radius: 8upx;
	text-spacing: 25upx;
}

.tag2{
	position: absolute;
	top: 193upx;
	right: 0upx;
	font-size: 20upx;
	font-weight: bold;
	padding: 0 14upx;
	color: #232323;
	line-height: 38upx;
	background: linear-gradient(#fffcde 0%, #ffd291 100%);
	border-radius: 8upx 0px 0px 8upx;
	box-sizing: border-box;
}

.cover {
	width: 338upx;
	height: 240upx;
	border-radius: 16upx 16upx 0 0;
	display: block;
}

.content {
	padding: 30upx 20upx;
	color: #333;
}

.title {
	font-size: 28upx;
	// line-height: 64upx;
	font-weight: bold;
	text-spacing: 25upx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

}

.time {
	font-size: 18upx;
	// line-height: 55upx;
	margin-bottom: 22upx;
	text {
		font-size: 20upx;
		font-weight: bold;
		color: #009B01;
		margin-left: 12upx;
	}
}

.join {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 20upx;
	font-weight: bold;
	white-space: nowrap;
	text {
		color: #009B01;
		margin-left: 12upx;
	}

	.button {
		width: 140upx;
		line-height: 44upx;
		text-align: center;
		background-color: #009B01;
		color: #fff;
		border-radius: 6upx;
		// margin-left: 17upx;
	}
}
</style>
